<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
        如何在使用组件标签时，传递参数到组件内部
        1. 父组件 ->  子组件   标签属性     props  单向数据流
        2. 子组件 -> 父组件    自定事件
        3. vuex
      组件间参数传递的方式不仅限于以上方案
-->

<div id="app">
    <h2>教师信息展示</h2>
<!--    <teacher name="tom" age="21" major="Java"></teacher>-->
<!--    <teacher v-bind:name="teacher.name" :age="teacher.age" :major="teacher.major"></teacher>-->
    <teacher  v-for="teacher in teachers" :name="teacher.name" :age="teacher.age" :major="teacher.major"></teacher>

</div>

<script>

    // 教师组件
    let teacher = {
        template: `
               <div class="box">
                    <h5>姓名：{{name}}</h5>
                    <h5>年龄：{{age}}</h5>
                     <h5>专业：{{major}}</h5>
                </div>
        `,
        props:['name','age','major']   //  接收标签中参数  就相当于在data中定义的属性
    }

    let vm = new Vue({
        el:'#app',
        data:{
            teacher:{
                name:'xiaoming',
                age:'30',
                major:'Java'
            },
            teachers:[
                {
                    name:'xiaoming1',
                    age:'30',
                    major:'Java'
                },
                {
                    name:'xiaoming2',
                    age:'32',
                    major:'Java'
                }
            ]

        },
        methods:{},
        components:{
            teacher
        }
      })
</script>
</body>
</html>